<template>
  <div class="form-group">
    <el-form-item label="填充方式">
      <el-radio-group v-model="pageStyle.fillType">
        <el-radio :label="0">纯色</el-radio>
        <el-radio :label="1">渐变</el-radio>
        <el-radio :label="2">图片</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 纯色填充 -->
    <div v-if="pageStyle.fillType === 0">
      <el-form-item label=" ">
        <ColorSetting v-model="pageStyle.backgroundColor" />
      </el-form-item>
      <el-form-item label=" ">
        <div class="boxs-predefine-colors px-12 py-16 bgc-white">
          <div
            v-for="colorValue in predefineColors"
            :key="colorValue"
            class="predefine-color"
            :class="{ 'is-alpha': !colorValue }"
            :style="{ backgroundColor: colorValue }"
            @click="$set(pageStyle, 'backgroundColor', colorValue)"
          ></div>
        </div>
      </el-form-item>
    </div>
    <!-- 渐变填充 -->
    <div v-if="pageStyle.fillType === 1" style="max-width: 478px">
      <el-form-item label=" " class="mb-24">
        <div class="linear-gradient-bar">
          <div class="fulled-h" :style="{ backgroundImage: linearGradientImage }">
            <el-color-picker
              v-model="pageStyle.gradientModel.colors[0]"
              class="absCenterY"
              show-alpha
            ></el-color-picker>
            <el-color-picker
              v-model="pageStyle.gradientModel.colors[1]"
              class="absCenterY"
              show-alpha
            ></el-color-picker>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="渐变角度">
        <div class="linear-gradient-rotate d-flex al-center bgc-white bd-filt">
          <el-slider
            v-model="pageStyle.gradientModel.rotate"
            class="flex-1 rotate-slider"
            :max="360"
            :step="1"
            :show-tooltip="false"
          ></el-slider>
          <div class="silder-input d-flex p-r ml-16">
            <el-input-number
              v-model="pageStyle.gradientModel.rotate"
              :min="0"
              :max="360"
              :step="1"
              :precision="0"
              :controls="false"
            ></el-input-number>
            <i class="icon icon-angel absCenterY"></i>
            <i class="unit-angel">°</i>
          </div>
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <div class="boxs-predefine-colors px-12 py-16 bgc-white">
          <div
            v-for="(GradientColorValue, i) in predefineGradientColors"
            :key="i"
            class="predefine-color"
            :class="{ 'is-alpha': i === 0 }"
            :style="{ backgroundImage: `linear-gradient(${GradientColorValue[0]}, ${GradientColorValue[1]})` }"
            @click="pageStyle.gradientModel.colors = [...GradientColorValue]"
          ></div>
        </div>
      </el-form-item>
    </div>
    <!-- 图片填充 -->
    <div v-if="pageStyle.fillType === 2">
      <el-form-item label="上传图片">
        <PictureMaterialSelector :img-url.sync="pageStyle.backgroundImage" clearable>
          <template #tip>
            <div>
              <div class="mb-6">请上传宽度为750像素的图片</div>
              <div>大小不超过2M</div>
            </div>
          </template>
        </PictureMaterialSelector>
      </el-form-item>
      <el-form-item label="拉伸方式">
        <el-radio v-model="pageStyle.backgroundRepeat" label="no-repeat" class="mr-24">等比适应</el-radio>
        <el-radio v-model="pageStyle.backgroundRepeat" label="repeat-y">纵向平铺</el-radio>
      </el-form-item>
      <el-form-item v-if="opacitySetting" label="不透明度">
        <div class="opacity-setting d-flex al-center bgc-white bd-filt">
          <el-slider
            v-model="pageStyle.opacity"
            :min="0"
            :max="1"
            :step="0.01"
            class="flex-1"
            :show-tooltip="false"
          ></el-slider>
          <div class="slider-input p-r ml-16">
            <el-input-number
              :value="pageStyle.opacity * 100"
              :min="0"
              :max="100"
              :step="1"
              :precision="0"
              :controls="false"
              @input="(val) => (pageStyle.opacity = val / 100)"
            ></el-input-number>
            <i class="unit-percentage absCenterY">%</i>
          </div>
        </div>
      </el-form-item>
    </div>
  </div>
</template>

<script>
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import ColorSetting from './ColorSetting.vue';
  export default {
    components: { ColorSetting, PictureMaterialSelector },
    model: { prop: 'pageStyle' },
    props: {
      pageStyle: { type: Object, default: () => ({}) },
      opacitySetting: { type: Boolean, default: true }
    },
    data() {
      this.predefineGradientColors = predefineGradientColors;
      this.predefineColors = predefineColors;
      return {};
    },
    computed: {
      linearGradientImage() {
        const startColor = this.pageStyle.gradientModel.colors[0];
        const endColor = this.pageStyle.gradientModel.colors[1];
        return `linear-gradient(to right, ${startColor}, ${endColor})`;
      }
    }
  };

  // 预选颜色
  const predefineColors = [
    null,
    '#000000',
    '#FFFFFF',
    '#E2E2E2',
    '#FF1900',
    '#FF5448',
    '#FF89CF',
    '#B55A57',
    '#93321D',
    '#5D1B1B',
    '#F3E2BC',
    '#DDB273',
    '#FFB243',
    '#688B7E',
    '#223E3F',
    '#2E81FF',
    '#4772E6',
    '#6063D8',
    '#36416A',
    '#8D91FF'
  ];

  // 预选渐变色色
  const predefineGradientColors = [
    ['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 0)'],
    ['rgba(82, 255, 120, 1)', 'rgba(104, 91, 255, 1)'],
    ['rgba(255, 58, 25, 1)', 'rgba(244, 115, 101, 1)'],
    ['rgba(255, 116, 51, 1)', 'rgba(255, 178, 67, 1)'],
    ['rgba(180, 236, 81, 1)', 'rgba(66, 147, 33, 1)'],
    ['rgba(31, 102, 225, 1)', 'rgba(28, 31, 163, 1)'],
    ['rgba(119, 98, 255, 1)', 'rgba(75, 79, 255, 1)'],
    ['rgba(98, 98, 98, 1)', 'rgba(0, 0, 0, 1)'],
    ['rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 0)'],
    ['rgba(255, 255, 255, 1)', 'rgba(217, 217, 217, 1)'],
    ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)'],
    ['rgba(226, 226, 226, 1)', 'rgba(226, 226, 226, 0)'],
    ['rgba(181, 90, 87, 1)', 'rgba(181, 90, 87, 0)'],
    ['rgba(147, 50, 29, 1)', 'rgba(147, 50, 29, 0)'],
    ['rgba(243, 226, 188, 1)', 'rgba(243, 226, 188, 0)'],
    ['rgba(221, 178, 115, 1)', 'rgba(221, 178, 115, 0)'],
    ['rgba(104, 139, 126, 1)', 'rgba(104, 139, 126, 0)'],
    ['rgba(96, 99, 216, 1)', 'rgba(96, 99, 216, 0)'],
    ['rgba(71, 114, 230, 1)', 'rgba(71, 114, 230, 0)'],
    ['rgba(54, 65, 106, 1)', 'rgba(54, 65, 106, 0)']
  ];
</script>

<style lang="scss" scoped>
  // 渐变设置bar
  .linear-gradient-bar {
    position: relative;
    border-radius: 2px;
    height: 32px;
    background-image: url() !important;

    ::v-deep .el-color-picker {
      width: 14px;
      height: 14px;
      font-size: 0;

      &:first-child {
        left: 8px;
      }

      &:last-child {
        right: 8px;
      }

      .el-color-picker__trigger {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background-color: #fff;

        .el-color-picker__color {
          display: none;
        }
      }
    }
  }
  // 渐变角度
  .linear-gradient-rotate {
    padding: 24px;
    height: 80px;

    .silder-input {
      width: 78px;

      ::v-deep {
        .el-input-number,
        .el-input {
          width: 100%;
        }

        .el-input__inner {
          padding: 0 30px 0 16px;
        }
      }
    }

    .unit-angel {
      position: absolute;
      top: 9px;
      right: 28px;
      line-height: 1;
    }

    .icon-angel {
      right: 10px;
      width: 14px;
      height: 14px;
      line-height: 1;
      background-image: url('~@/assets/images/marketing/productEdit/icons/icon-angel.png');
    }
  }

  // 透明度配置
  .opacity-setting {
    padding: 24px;
    width: 360px;
    height: 80px;

    // 图片透明度 slider
    .slider-input ::v-deep {
      width: 78px;

      .el-input-number,
      .el-input {
        width: 100%;
      }

      .el-input__inner {
        padding: 0 28px 0 20px;
      }

      .unit-percentage {
        right: 10px;
        line-height: 1;
        color: #cecece;
      }
    }
  }

  // 预选颜色面板
  .boxs-predefine-colors {
    display: grid;
    grid-auto-rows: 24px;
    grid-template-columns: repeat(auto-fill, 24px);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    justify-content: space-between;
    max-width: 360px;

    .predefine-color {
      border-radius: 2px;
      outline: 1px solid transparent;

      &:hover {
        outline-color: map-get($bdColors, 'theme');
      }

      &.is-alpha {
        background-image: url() !important;
      }
    }
  }

  ::v-deep {
    .el-form-item:not(:last-of-type) {
      margin-bottom: 24px;
    }
  }
</style>
